<template>
    <dv-border-box-13 class="container-panel">
        <div class="title fs-xl">{{title}}</div>
        <div class="contain w-100">
            <slot></slot>
        </div>
    </dv-border-box-13>
</template>

<script setup>
import { defineProps } from 'vue';
const props=defineProps({
    title:{
        type:String,
        default:''
    }
})
</script>

<style lang="scss" scoped>
.container-panel {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 194, 255, 0.1);
}

.title {
    color: #00c2ff;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0 5px 20px;
    text-align: left;
    text-shadow: 0 0 5px rgba(0, 194, 255, 0.5);
}

.contain {
    box-sizing: border-box;
    height: calc(100% - 40px);
    width: 100%;
    padding: 0 10px;
}
</style>